<template>
  <div class="corner-info" :class="position">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'CornerInfo',
  props: {
    position: {
      type: String,
      required: true,
      validator: value => ['corner-info-tl', 'corner-info-tr', 'corner-info-bl', 'corner-info-br'].includes(value)
    }
  }
}
</script>

<style scoped>
@import '../styles/variables.css';

.corner-info {
  position: absolute;
  padding: var(--spacing-sm);
  color: var(--text-primary);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: var(--font-size-sm);
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--border-radius-md);
  z-index: 100;
  pointer-events: none;
  max-width: 250px;
  line-height: 1.4;
}

.corner-info-tl {
  top: var(--spacing-md);
  left: var(--spacing-md);
}

.corner-info-tr {
  top: var(--spacing-md);
  right: var(--spacing-md);
  text-align: right;
}

.corner-info-bl {
  bottom: var(--spacing-md);
  left: var(--spacing-md);
}

.corner-info-br {
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  text-align: right;
}
</style>

<style>
/* 全局样式 - 不加scoped */
.patient-info,
.image-info,
.viewport-params {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.patient-info div,
.image-info div,
.viewport-params div {
  white-space: nowrap;
}
</style>
